<template>
	<div>
		<el-form  :model="purchase" label-width="80px" :inline="true" :rules="rules" ref="purchase">
			<el-form-item label="单据编号:" class="el-purchase">
				<el-input v-model="purchase.purchaseNumber"  v-text="purchase.purchaseNumber"></el-input>
			</el-form-item>
			<el-form-item label="供货商:" prop="supplierId" class="el-purchase">
				<el-select v-model="purchase.supplierId" placeholder="请选择">
				     <el-option
				       v-for="item in supplierList"
				       :key="item.id"
				       :label="item.name"
				       :value="item.id">
				     </el-option>
				</el-select>
			</el-form-item>
			
			
			<el-form-item label="应付金额:" class="el-purchase">
				<el-input v-model="purchase.amountPayable" readonly></el-input>
			</el-form-item>
			<el-form-item label="实付金额:" class="el-purchase">
				<el-input v-model="purchase.amountPaid"></el-input>
			</el-form-item>
			<el-form-item label="备注:" class="el-purchase">
				<el-input
				  type="textarea"
				  placeholder="请输入备注"
				  v-model="purchase.remarks"
				  maxlength="30"
				  show-word-limit
				>
				</el-input>
			</el-form-item>
			<el-form-item label="状态:" prop="state" class="el-purchase">
				<el-select v-model="purchase.state" placeholder="请选择">
				     <el-option
				       label="已付款"
				       value="1">
				     </el-option>
					 <el-option
					   label="未付款"
					   value="2">
					 </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="操作人员:" class="el-purchase">
				<el-input v-model="purchase.userId" :value="admin.id" v-text="admin.name"></el-input>
			</el-form-item>
			
			<el-form-item class="el-purchase">
				<el-button type="primary" @click="submitForm('purchase')">保存</el-button>
				<el-button @click="resetForm('purchase')">重置</el-button>
			</el-form-item>
			
			<hr />
			<div>
				<el-form :model="dialogGoods" :inline="true" :rules="addGoodsRules" ref="dialogGoods">
					<el-form-item label="商品类型:" prop="typeId">
						<el-cascader style="width: 100px;"
							placeholder="选择商品类型"
							v-model="dialogGoods.typeId"
							:options="goodsType"
							:props="{ expandTrigger: 'hover',label: 'name',value: 'id',emitPath: 'false'}"
							@change="handleChange"
							filterable></el-cascader>
					</el-form-item>
					<el-form-item label="选择商品:" prop="goods">
						<el-select v-model="dialogGoods.goods" placeholder="请选择" style="width: 100px;" value-key="id">
						     <el-option 
								v-for="item in goodsSelect"
								:key="item.id"
								:label="item.code"
								:value="item">
						     </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称:">
						<el-input v-model="dialogGoods.goods.name" ></el-input>
					</el-form-item>
					<el-form-item label="入库数量:" prop="goodsNumber">
						<el-input v-model="dialogGoods.goodsNumber" type="number" style="width: 100px;" prop="goodsNumber"></el-input>
					</el-form-item>
					<el-form-item >
						<el-button type="primary" @click="purchaseAddGoods('dialogGoods')" plain>添加商品</el-button>
					</el-form-item>
				</el-form>
			</div>
			<hr />
			
			<div style="width: 100%">
				<el-table
					ref="multipleTable"
					:data="goodsListAdd"
					tooltip-effect="dark"
					style="width: 100%"
					>
					<el-table-column
						type="selection"
						width="55">
					</el-table-column>
					
					<el-table-column
						prop="code"
						label="商品编号"
						width="160">
					</el-table-column>
					<el-table-column
						prop="name"
						label="商品名称"
						width="160">
					</el-table-column>
					<el-table-column
						prop="model"
						label="商品型号"
						width="160">
					</el-table-column>
					<el-table-column
						prop="inventoryQuantity"
						label="商品数量"
						width="160">
					</el-table-column>
					<el-table-column
						prop="purchasingPrice"
						label="单价"
						width="160">
					</el-table-column>
					<el-table-column
						prop="unit"
						label="计量单位"
						width="160">
					</el-table-column>
					<el-table-column
						label="总金额"
						width="160">
						<template slot-scope="scope">
							<span>{{scope.row.inventoryQuantity * scope.row.purchasingPrice}}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						width="160">
						<template slot-scope="scope">
							<el-button type="danger" @click="deleteGoods(scope.row)" plain>移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//单据对象
				purchase:{
					id: '',
					amountPaid: '',
					amountPayable: '',
					purchaseDate: '',
					remarks: '',
					state: '',
					purchaseNumber: '',
					supplierId: '',
					userId: '',
				},
				
				//当前登录用户
				admin:{},
				
				//所有供应商，选择器使用
				supplierList:[],
				
				//选择商品弹框
				dialogSync:false,
				
				//商品类型
				goodsType: [],
				
				//选择器商品信息
				goodsSelect:[],
				//弹框中信息
				dialogGoods: {
					//商品信息
					goods:'',
					//商品数量
					goodsNumber:'',
					//选择器选中类型id
					typeId: '',
				},
				
				//添加入库的商品
				goodsListAdd: [],
				
				//单据判空
				rules: {
					supplierId: [{required: true, message: '请选择供应商', trigger: 'blur'}],
					state: [{required: true, message: '请选择单据状态', trigger: 'blur'}],
				},
				
				//添加商品判空
				addGoodsRules: {
					goods: [{required: true, message: '请选择商品', trigger: 'blur'}],
					goodsNumber: [{required: true, message: '请输入商品数量', trigger: 'blur'}],
				}
				
			};
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
		created() {
			this.admin=JSON.parse(sessionStorage.getItem('user'));
			//console.log(this.userObj);
		},
		//在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
		mounted() {
			this.postRequest("/purchase/stackPageInit").then(res=> {
				if(res.code === 200) {
					this.supplierList=res.data.supplierList;
					this.purchase.purchaseNumber=res.data.purchaseNumber;
					this.goodsType=res.data.goodstypeList;
					this.goodsType=this.getTreeData(this.goodsType);
					this.goodsSelect=res.data.goodsList;
					//console.log(this.goodsType);
				};
			})
		},
		//监视函数，只要上面data中同名变量的值一发生改变，watch中的同名监视函数就会自动执行
		watch: {
		},
		methods: {
			//添加商品
			purchaseAddGoods(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dialogGoods.goods.inventoryQuantity=this.dialogGoods.goodsNumber;
						this.goodsListAdd.push(this.dialogGoods.goods);
						
						//计算应付金额
						var payable = 0;
						//console.log(typeof payable);
						for (var i = 0; i < this.goodsListAdd.length; i++) {
							var item = this.goodsListAdd[i];
							var m = item.inventoryQuantity * item.purchasingPrice;
							payable = payable + m;
						}
						//console.log(payable);
						this.purchase.amountPayable=payable;
						this.purchase.amountPaid=payable;
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
				
			},
			//移除商品
			deleteGoods(row) {
				this.goodsListAdd.splice(this.goodsListAdd.indexOf(row),1);
			},
			
			//打开选择商品弹框
			optionDialog() {
				this.dialogSync=true;
			},
			//类型级联选中器选中节点值,选中节点，查询对应商品信息
			handleChange(value) {
				//console.log(value);
				this.dialogGoods.typeId = value[value.length - 1];
				//console.log(this.typeId);
				
				this.postRequest("/purchase/queryByTypeGoods/"+this.dialogGoods.typeId).then(res=> {
					this.goodsSelect=res.data.goodsList;
				})
			},
			// 递归判断列表，把最后的children设为undefined
			getTreeData(treeData){
			  for(var i=0;i<treeData.length;i++){
				if(treeData[i].children.length<1){
				  // children若为空数组，则将children设为undefined
				  treeData[i].children=undefined;
				}else {
				  // children若不为空数组，则继续 递归调用 本方法
				  this.getTreeData(treeData[i].children);
				}
			  }
			  return treeData;
			},
			
			//保存单据
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//判断有商品才提交单据
						if(this.goodsListAdd.length != 0) {
							//数据处理
							this.purchase.userId=this.admin.id;
							var jsonArr = {'purchase':this.purchase,'goodsList':this.goodsListAdd};
							
							this.putRequest("/purchase/save",jsonArr).then(res=> {
							});
						} else {
							 this.$message({
								message: '单据中不能没有商品!!!',
								type: 'warning'
							});
						}
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.el-purchase {
		width: 24%;
	}
</style>
